<template lang="html">
<el-row :gutter="24">
    <el-col :span="23">
        <el-card class="box-card configure">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="title" label="小说"></el-table-column>
                <el-table-column prop="auth" label="作者"></el-table-column>
                <el-table-column prop="style" label="类型"></el-table-column>
                <el-table-column inline-template label="简介" :show-overflow-tooltip="true">
                    <span v-html="row.introduction"></span>
                </el-table-column>
                <el-table-column inline-template prop="id" fixed="right" width="130" align="center" label="操作">
                    <span>
                        <router-link :to="{ path: '/novel/' + row.id}"><el-button size="small">查看</el-button></router-link>
                        <el-button @click="del(row.id, $index)" size="small" type="danger">删除</el-button>
                    </span>
                </el-table-column>
            </el-table>
            <el-pagination :border="true" @current-change="handleCurrentChange" :current-page="page" layout="prev, next"></el-pagination>
        </el-card>
    </el-col>
</el-row>
</template>

<script type="text/babel">
export default {
    data() {
        return {
            tableData: [],
            next:0,
            page:0,
        }
    },
    methods: {
        del(id, index) {
            var _this = this
            _this.$http.delete("http://novel.nightc.com/v1/novel/" + id, {}).then((response) => {
                    var body = response.body
                    if (body.code != undefined && body.code == 0 ) {
                        _this.$message('删除成功');
                        _this.tableData.splice(index, 1)
                    } else {
                        _this.$message(body.data);
                    }
            },(response) => {
                var body = response.body
                if (body.data != undefined) {
                    _this.$message(body.data);
                }
            })
        },
        handleCurrentChange(nextpage){
            return fetch(nextpage)
        },
        fetch(nextpage) {
            if (nextpage == 0) {
                _this.$message("当前是第一页");
                return false
            }
            if (nextpage > 0 && _this.next == 0) {
                _this.$message("没有下一页了");
                return false
            }
            var _this = this
            _this.$http.get("http://novel.nightc.com/v1/novels?page=" + _this.next, {}).then((response) => {
                var body = response.body
                if (body.code == 0) {
                    for (var i in body.data) {
                        _this.tableData.push({
                            title: body.data[i].title,
                            auth: body.data[i].auth,
                            style: body.data[i].style,
                            introduction: body.data[i].introduction,
                            id: body.data[i].id,
                        })
                    }
                    _this.page = _this.next
                    _this.next = body.next
                } else {
                    console.log(body.data)
                }
            },(response) => {
                if (response.body.data != undefined) {
                    console.log(response.body.data)
                }

            })
        }
    },
    mounted() {
        this.fetch()
    }
}
</script>

<style lang="css" rel="stylesheet/css">
.configure {
    width: 100%;
    min-height: 600px;
}
</style>
